<template>
  <div class="container" style="padding:20px">
    <el-card >
      <template #header>
        <span>试题录入</span>
      </template>

      <!-- 表单内容 -->
      <el-form label-width="100px">
        <el-form-item label="学科:">
          <el-select @change="selectSubject" v-model="formData.subjectID"  placeholder="请选择" style="width:400px">
            <el-option v-for="subject in  subjects" :key="subject.value" :value="subject.value" :label="subject.label"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="目录:">
          <el-select v-model="formData.catalogID"  placeholder="请选择" style="width:400px">
            <el-option v-for="catalog in catalogs" :key="catalog.value" :value="catalog.value" :label="catalog.label"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业:">
          <el-select  v-model="formData.enterpriseID" placeholder="请选择" style="width:400px">
            <el-option v-for="company in companys" :key="company.id" :value="company.id" :label="company.company"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市:">

          <el-select v-model="formData.province" @change="selectProvince"  placeholder="请选择" style="width:200px">
            <el-option v-for="province in provinces" :key="province" :value="province"></el-option>
          </el-select>

          <el-select v-model="formData.city"  placeholder="请选择" style="width:200px">
              <el-option v-for="city in citys" :key="city" :value="city"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向:">
          <el-select v-model="formData.direction"  placeholder="请选择" style="width:400px">
            <el-option v-for="direction in directions" :key="direction" :value="direction"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="题型:">
          <el-radio-group v-model="formData.questionType">
            <el-radio v-for="item in questionList" :key="item.label" :label="item.value + ''">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="难度:">
          <el-radio-group  v-model="formData.difficulty">
            <el-radio v-for="item in difficultyList" :key="item.label" :label="item.value +  ''">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="题干:">
          <quill-editor v-model="formData.question"></quill-editor>
        </el-form-item>

        <!-- 单选项部分 -->
        <el-form-item label="选项:" v-if="formData.questionType === '1'">
          <div>
            <ol v-for="(item,index) in formData.options" :key="item.code">
              <!-- v-model 是确认单选唯一值作用                   !传入被点击的元素下标     -->
              <el-radio v-model="text_d" :label="item.code" @change="selectRadioForQT(index)">
                {{item.code}}:
                <el-input v-model="formData.options[index].title"></el-input>
              </el-radio>
            </ol>
          </div>

          <el-button icon="el-icon-plus" type="danger" disabled style="margin-top:20px">增加选项和答案</el-button>
        </el-form-item>

        <!-- 多选部分 -->
        <el-form-item label="选项:" v-if="formData.questionType === '2'">
          <div>
            <ol v-for="(item,index) in formData.options" :key="item.code">
              <el-checkbox v-model="formData.options[index].isRight"  :label="item.code">
                {{item.code}}:
                <el-input v-model="formData.options[index].title"></el-input>
              </el-checkbox>
            </ol>
          </div>

          <el-button icon="el-icon-plus" type="danger" @click="switchCheckbox">增加选项和答案</el-button>
        </el-form-item>

        <el-form-item label="解析视频:">
          <el-input v-model="formData.videoURL" style="width:400px"></el-input>
        </el-form-item>

        <el-form-item label="答案解析:">
          <quill-editor v-model="formData.answer"></quill-editor>
        </el-form-item>

        <el-form-item label="题目备注:">
          <el-input type="textarea" v-model="formData.remarks" style="width:400px"></el-input>
        </el-form-item>

        <el-form-item label="试题标签:">
          <el-select v-model="formData.tags" collapse-tags  multiple   placeholder="请选择试题标签" style="width:400px">
            <el-option v-for="tag in tagsList" :key="tag.value" :value="tag.label"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="试题标签:">
          <el-button type="success" v-if="isEdit" @click="submitForm">确认提交</el-button>
          <el-button type="primary" v-else @click="submitForm">确认提交</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>
//! 引入接口api
// 1.获取学科列表
import { simple } from '@/api/hmmm/subjects.js'
// 1 获取企业列表
import { list } from '@/api/hmmm/companys.js'
// 1 获取学科目录列表
import { simple as catalog } from '@/api/hmmm/directorys.js'
// 1 获取试题标签数据
import { simple as tags } from '@/api/hmmm/tags.js'
// 1 添加基础题库
import { add, detail } from '@/api/hmmm/questions.js'

//! 获取城市数据
import { provinces, citys } from '@/api/hmmm/citys.js'
// !获取方向数据
import { direction, difficulty, questionType } from '@/api/hmmm/constants.js'

//! 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Vue from 'vue'
Vue.use(VueQuillEditor) // 全局注册富文本编辑器

export default {
  data () {
    return {
      isEdit: false,
      text_d: 'danxuan', // 单选唯一值
      // 学科数据列表
      subjects: [],
      // 公司列表数据
      companys: [],
      // 目录列表数据
      catalogs: [],
      // 获取城市数据
      provinces: provinces(),
      // 地区数据
      citys: [],
      // 方向
      directions: direction,
      // 题型数据
      questionList: questionType,
      // 难度数据
      difficultyList: difficulty,
      // 试题标签数据
      tagsList: [],
      // 表单数据
      formData: {
        subjectID: '', // 学科 id
        enterpriseID: '', // 企业 id
        catalogID: '', // 目录id
        province: '', // 城市名称
        city: '', // 地区名称
        direction: '', // 方向
        questionType: '2', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        videoURL: '', // 解析视频url
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '', // 试题标签,
        options: [
          { isRight: false, img: '', title: '', code: 'A' },
          { isRight: false, img: '', title: '', code: 'B' },
          { isRight: false, img: '', title: '', code: 'C' },
          { isRight: false, img: '', title: '', code: 'D' }
        ]
      }
    }
  },
  async created () {
    // ! 初始化获取 学科和企业列表数据
    this.getSubjectsList()
    this.getCompanysList()
    // ? 路由传参了 则代表是 编辑模式
    if (this.$route.query.id) {
      this.isEdit = true
      const res = await detail({ id: this.$route.query.id })
      console.log(res)
      // 拿到目录id
      this.formData.subjectID = res.data.subjectID
      //*  1.赋值 然后发送请求 获取 目录列表 和 试题标签
      this.selectSubject(this.formData.subjectID)
      //*  2.整体数据回填
      this.formData = res.data

      //*  3.获取到用户的城市 获取用户的地区
      this.formData.province = res.data.province
      this.selectProvince(this.formData.province)
      // *  4.回填标签
      this.formData.tags = res.data.tags.split(',')

      //* 5 options 数据处理
      this.formData.options.forEach(item => {
        if (item.isRight) {
          item.isRight = true
          // 默认选择
          this.text_d = item.code
        } else {
          item.isRight = false
        }
      })
    }
  },
  methods: {
    //* 1 获取到学科列表
    async getSubjectsList () {
      const res = await simple()
      // console.log(res.data)
      this.subjects = res.data
    },
    //* 2.获取到企业数据列表
    async getCompanysList () {
      const res = await list({ pagesize: 1000, page: 1 })
      // console.log(res.data)
      this.companys = res.data.items
    },
    // * 3选择了学学科 或者对应的 目录列表 和 试题标签
    async selectSubject (subjectID) {
      if (subjectID) {
        // 获取目录数据
        // 获取之前先清空
        this.formData.catalogID = ''
        this.formData.tags = ''
        const res = await catalog({ subjectID })
        // console.log(res)
        this.catalogs = res.data
        // 获取试题标签数据
        const res2 = await tags({ subjectID })
        // console.log(res2)
        this.tagsList = res2.data
      }
    },
    //* 4选择了城市选项回调函数
    selectProvince (provinceName) {
      // 获取city 数据
      this.citys = citys(provinceName)
    },

    //* 5.提交表单
    async submitForm () {
      this.formData.tags = this.formData.tags.join(',')
      const res = await add(this.formData)
      console.log(res)
      this.$message.success('操作成功了')
      // 跳转页面
      this.$router.push('/questions/list')
    },
    //* 6.选择单选项
    selectRadioForQT (index) {
      this.formData.options.forEach(item => {
        item.isRight = false
      })
      // 修改对应选项的值
      // console.log(this.formData.options[index].isRight)
      this.formData.options[index].isRight = true
      // console.log(this.formData.options[index].isRight)
    },
    //* 7.点击新增多选盒子
    switchCheckbox () {
      // 获取到当前数组的长度
      const length = this.formData.options.length
      // 获取起始A的ASCII码值
      const aAscii = 'A'.charCodeAt()
      const nChar = String.fromCharCode(aAscii + length)
      // console.log(aAscii)
      // console.log(length)
      // console.log(nChar)
      this.formData.options.push(
        { isRight: false, img: '', title: '', code: nChar }
      )
    }
  }
}
</script>

<style scoped lang='scss'>
// 富文本高度
::v-deep .quill-editor .ql-editor{
  height: 200px;
}

::v-deep .el-form-item .el-row{
  margin-bottom: 21px;
  .el-radio,.el-radio__label{
    line-height: normal;
    margin-top: 7px;
  }
}

</style>
